<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用新型盒布局设计网页</title>
<style type="text/css">
body, html {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	font-family:Arial, Helvetica, sans-serif;
}
h3 {
	padding:15px;
	color:#FFFFFF;
	margin:0px;
}
a {
	color:#fff;
}
body {
	/* 开启盒布局 */
	display:-webkit-box;
	display:-moz-box;
	display:box;
	/* 设置盒子内元素水平居中 */
	-webkit-box-pack:center;
	-moz-box-pack:center;
	box-pack:center;
}
/* 第一层 */
#area {
	height:100%;
	max-width:950px;            /* 最大宽度  */
	min-width:600px;            /* 最小宽度  */
	/* 开启盒布局 */
	display:-webkit-box;
	display:-moz-box;
	display:box;
	/* 垂直布局，实现竖直方向的三栏布局 */
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	box-orient:vertical;
	/* 定义空间弹性，使其充满页面空间，但宽度受max-width限制 */
	-webkit-box-flex:1;
	-moz-box-flex:1;
	box-flex:1;
}
/* 第二层 */
#area header {
	background-color:#ff6600;
	text-align:center;
	line-height:35px;
	color:#FFFFFF;
	font-size:24px;
	font-weight:bold;
}
#area #header {
	padding:15px;
}
#area #container {
	/* 定义空间弹，使其随空间伸缩尺寸 */
	-webkit-box-flex:1;
	-moz-box-flex:1;
	box-flex:1;
	/* 开启盒布局 */
	display:-webkit-box;
	display:-moz-box;
	display:box;
}
#area footer {
	background-color:#f47D31;
	text-align:center;
	line-height:20px;
	color:#FFFFFF;
}
#area #footer {
	padding:10px;
}
/* 第三层 */
#area #container nav {
	width:170px;
	background-color:#999;
}
#area #container article {
	padding:10px;
	-webkit-box-flex:1;
	-moz-box-flex:1;
	box-flex:1;
	display:-webkit-box;
	display:-moz-box;
	display:box;
	/* 布局方向设置为竖直方向 */
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	box-orient:vertical;
}
#area #container aside {
	width:170px;
	background-color:#999;
}
/* 左侧导航 */
#area #container nav a:link, #area #container nav a:visited {
	display:block;
	border-bottom:3px solid #fff;
	padding:10px;
	text-decoration:none;
	font-weight:bold;
	margin:5px;
}
#area #container nav a:hover {
	color:#FFFFFF;
	background-color:#f47D31;
}
/* 中间内容 */
#area #container article p {
	-webkit-box-flex:1;
	-moz-box-flex:1;
	box-flex:1;
}
/* 侧边栏 */
#area #container aside p {
	padding:15px;
	font-weight:bold;
	font-style:italic;
	color:#FFF;
}
</style>
</head>
<body>
<div id="area">
  <header id="header">页头：使用新型盒布局设计网页 </header>
  <div id="container">
    <nav>
      <h3>导航栏</h3>
      <a href="#">盒布局</a> <a href="#">布局方向</a> <a href="#">布局顺序</a> </nav>
    <article>
      <header>标题：开启盒布局 </header>
      <p>内容：盒布局是CSS3发展的新型布局方式，它比传统的浮动布局方式更加完善、更加灵活，而使用方法却极为简单。
        开启盒布局后，文档就会按照盒布局默认的方式，来布局子元素。</p>
      <footer> 日期：2011-10 </footer>
    </article>
    <aside>
      <h3>侧边栏</h3>
      <p>侧边栏内容</p>
    </aside>
  </div>
  <footer id="footer"> 页脚：2011&copy; </footer>
</div>
</body>
</html>